<template>
  <view
    class="test"
    :class="{
      w100: isShowAnswer,
    }"
  >
    <view
      class="test_top"
      v-for="(item, index) in list"
      :key="index"
      v-show="currentIndex === index"
    >
      <view class="title">
        <view class="title_content">
          <view class="title_number">{{ index + 1 }}</view>
          <text>{{ item.question }}</text>
        </view>
      </view>
      <view class="box">
        <view class="options" v-if="item.optionsList.length > 0">
          <view
            class="options_container"
            v-for="(option, i) in item.optionsList"
            :key="i"
            @click="choiceAnswer(item, option)"
            :class="{
              active: item.choiceAnswer === option.name && !isShowAnswer,
              correct: item.answer === option.name && isShowAnswer,
              error: item.choiceAnswer === option.name && isShowAnswer,
            }"
          >
            <view class="options_content">
              {{ option.name }}.{{ option.value }}
            </view>
            <view class="options_iamge">
              <image
                v-if="item.answer === option.name && isShowAnswer"
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/correct.png"
                mode="widthFix"
              ></image>
              <image
                v-else-if="item.choiceAnswer === option.name && isShowAnswer"
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/error.png"
                mode="widthFix"
              ></image>
            </view>
          </view>
        </view>
        <view class="answer" v-if="isShowAnswer">
          正确答案：{{ item.answer }}<br />
          解析：{{ item.analysis }}
        </view>
      </view>
    </view>
    <view class="test_bottom">
      <view class="button">
        <view class="button_content" @click="prevQuestion()">
          <text>上一题</text>
        </view>
        <view
          class="button_content"
          v-if="
            (currentIndex === list.length - 1 && !isShowAnswer) ||
            (notDoneTempIndex === notDoneTempList.length - 1 && !isShowAnswer)
          "
          @click="submit()"
        >
          <text>交卷</text>
        </view>
        <view class="button_content" v-else @click="nextQuestion()">
          <text>下一题</text>
        </view>
      </view>
    </view>
    <u-mask :show="isShowPopup" :zoom="false">
      <view class="popup_container">
        <view class="popup_title">你还有未做完的题目，确定交卷吗？</view>
        <view class="popup_button">
          <view class="popup_button_content" @click="checkNotDone()">
            <view class="popup_button_icon">
              <u-icon name="arrow-left" color="#FCE38A" size="28"></u-icon>
            </view>
            <text>查看未做题</text>
          </view>
          <view class="popup_button_content" @click="confirmSubmit()">
            <text>交卷</text>
            <view class="popup_button_icon">
              <u-icon name="arrow-right" color="#FCE38A" size="28"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </u-mask>
    <u-mask :show="isShowTestPopup" :zoom="false">
      <view class="popup_container">
        <view class="popup_content">
          <view class="popup_img">
            <image
              v-if="score > passScore && score <= totalScore"
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/laugh.png"
              mode="widthFix"
            ></image>
            <image
              v-else
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/cry.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="popup_score">
            <text>{{ score }}分</text>
          </view>
        </view>
        <view class="popup_info">
          <text>答对</text>
          <text>{{ correctNumber }}</text>
          <text>题,答错</text>
          <text>{{ list.length - correctNumber }}</text>
          <text>题 | 获得</text>
          <text>{{ goldNum }}</text>
          <text>个金币</text>
        </view>
        <view class="popup_button">
          <view
            class="popup_button_box"
            :class="{ disabled: list.length - correctNumber === 0 }"
            @click="viewWrongQuestion()"
          >
            查看错题
          </view>
          <view class="popup_button_text" @click="viewAllQuestion()">
            查看全部题目
          </view>
        </view>
      </view>
    </u-mask>
    <view class="mask mask_effect" v-if="isShowEffectPopup">
      <view class="effect" v-if="score == totalScore">
        <image
          class="effect1"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/beam.png"
          mode="widthFix"
        ></image>
        <image
          class="effect2"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/666.png"
          mode="widthFix"
        ></image>
      </view>
      <view class="effect" v-else-if="score < passScore">
        <image
          class="effect1"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/beam.png"
          mode="widthFix"
        ></image>
        <image
          class="effect2"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/hard.png"
          mode="widthFix"
        ></image>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "Test-Question",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  created() {
    this.init();
  },
  data() {
    return {
      questionInfo: null,
      currentIndex: 0,
      correctList: [],
      errorList: [],
      errorTempList: [],
      errorTempIndex: 0,
      allList: [],
      correctNumber: 0,
      notDoneList: [],
      notDoneTempList: [],
      notDoneTempIndex: 0,
      score: 0,
      singleScore: 0,
      passScore: 80,
      totalScore: 100,
      goldNum: 0,
      hasGold: true,
      isShowPopup: false,
      isShowTestPopup: false,
      isShowEffectPopup: false,
      isSeeNotDone: false,
      isSeeError: false,
      isShowAnswer: false,
    };
  },
  methods: {
    init() {
      this.list.forEach((item) => {
        this.allList.push(item.id);
        this.correctList.push(0);
        this.errorList.push(0);
        this.notDoneList.push(-1);
      });
      this.singleScore = this.totalScore / this.list.length;
      this.initData();
      this.initOptions();
    },
    initData() {
      this.questionInfo = this.list[this.currentIndex];
    },
    initOptions() {
      this.list.forEach((item) => {
        let optionsList = [];
        if (item.optiona) {
          optionsList.push({
            name: "A",
            value: item.optiona,
          });
        }
        if (item.optionb) {
          optionsList.push({
            name: "B",
            value: item.optionb,
          });
        }
        if (item.optionc) {
          optionsList.push({
            name: "C",
            value: item.optionc,
          });
        }
        if (item.optiond) {
          optionsList.push({
            name: "D",
            value: item.optiond,
          });
        }
        this.$set(item, "optionsList", optionsList);
        this.$set(item, "choiceAnswer", "");
      });
    },
    choiceAnswer(item, option) {
      this.$set(item, "choiceAnswer", option.name);
    },
    prevQuestion() {
      if (this.isSeeNotDone) return;
      if (
        this.currentIndex === 0 ||
        (this.isSeeError && this.currentIndex === this.errorTempList[0])
      )
        return;
      if (this.isSeeError) {
        this.errorTempIndex--;
        this.currentIndex = this.errorTempList[this.errorTempIndex];
        this.initData();
      } else {
        this.currentIndex--;
        this.initData();
      }
    },
    nextQuestion() {
      if (!this.isShowAnswer) {
        if (!this.isSeeNotDone) {
          this.checkRightAndWrong();
          this.currentIndex++;
        } else {
          this.checkRightAndWrong();
          this.notDoneTempIndex++;
          this.currentIndex = this.notDoneTempList[this.notDoneTempIndex];
        }
        this.initData();
      } else {
        if (
          this.currentIndex === this.list.length - 1 ||
          this.errorTempIndex === this.errorTempList.length - 1
        )
          return;
        if (this.isSeeError) {
          this.errorTempIndex++;
          this.currentIndex = this.errorTempList[this.errorTempIndex];
          this.initData();
        } else {
          this.currentIndex++;
          this.initData();
        }
      }
    },
    submit() {
      this.checkRightAndWrong();
      let isHasNotDone = this.notDoneList.some((item) => {
        return item > -1;
      });
      if (isHasNotDone) {
        this.isShowPopup = true;
      } else {
        this.submitTestPaper();
      }
    },
    confirmSubmit() {
      this.submitTestPaper();
    },
    submitTestPaper() {
      this.$emit("clearTimer");
      let correctList = [];
      this.correctList.forEach((item) => {
        if (item) {
          correctList.push(item);
        }
      });
      let errorList = [];
      this.errorList.forEach((item) => {
        if (item) {
          errorList.push(item);
        }
      });
      let count = 0;
      this.correctList.forEach((item) => {
        if (item) {
          count++;
        }
      });
      this.correctNumber = count;
      this.score = (this.singleScore * this.correctNumber).toFixed(2);
      this.isSeeNotDone = false;
      if (this.isShowPopup) {
        this.isShowPopup = false;
      }
      this.$emit("commitTest", this.errorList, this.correctNumber);
    },
    showResult(flag, num) {
      this.hasGold = flag;
      this.goldNum = num;
      this.isShowEffectPopup = true;
      if (this.score >= this.passScore && this.score < this.totalScore) {
        this.isShowTestPopup = true;
      } else {
        setTimeout(() => {
          this.isShowTestPopup = true;
        }, 3000);
      }
    },
    checkRightAndWrong() {
      const choiceAnswerText = this.list[this.currentIndex].choiceAnswer;
      if (choiceAnswerText !== "") {
        this.notDoneList.splice(this.currentIndex, 1, -1);
        if (choiceAnswerText === this.questionInfo.answer) {
          this.correctList.splice(this.currentIndex, 1, this.questionInfo.id);
          this.errorList[this.currentIndex] = 0;
        } else {
          this.errorList.splice(this.currentIndex, 1, this.questionInfo.id);
          this.correctList[this.currentIndex] = 0;
        }
      } else {
        this.errorList.splice(this.currentIndex, 1, this.questionInfo.id);
        this.notDoneList.splice(this.currentIndex, 1, this.currentIndex);
      }
    },
    checkNotDone() {
      this.isSeeNotDone = true;
      this.getNotDone();
      this.currentIndex = this.notDoneTempList[this.notDoneTempIndex];
      this.initData();
      this.isShowPopup = false;
    },
    getNotDone() {
      this.notDoneTempList = [];
      this.notDoneTempIndex = 0;
      this.notDoneList.forEach((item) => {
        if (item > -1) {
          this.notDoneTempList.push(item);
        }
      });
    },
    viewWrongQuestion() {
      if (this.list.length - this.correctNumber === 0) return;
      this.errorList.forEach((item, index) => {
        if (item) {
          this.errorTempList.push(index);
        }
      });
      this.currentIndex = this.errorTempList[this.errorTempIndex];
      this.initData();
      this.isShowAnswer = true;
      this.isSeeError = true;
      this.isShowEffectPopup = false;
      this.isShowTestPopup = false;
    },
    viewAllQuestion() {
      this.currentIndex = 0;
      this.initData();
      this.isShowAnswer = true;
      this.isShowEffectPopup = false;
      this.isShowTestPopup = false;
    },
  },
};
</script>
<style scoped lang="scss">
@import "./TestQuestion";
</style>
